<template>
  <div class="app-container">
    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
      <el-col :span="6">
        <el-form-item label="催收编号:">
          <el-input v-model="queryParams.code" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户名称:">
          <el-input v-model="queryParams.customerName" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="处理人:">
          <el-input v-model="queryParams.processedByNames" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="创建时间:">
          <el-date-picker v-model="foreWarningTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="催收进度:">
          <el-select v-model="queryParams.collectionProgress" clearable>
            <template v-for="dict in dict.type.collection_progress">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户等级:">
          <el-select v-model="queryParams.customerLevel" clearable>
            <template v-for="dict in dict.type.customer_level">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户来源:">
          <el-select v-model="queryParams.customerSource" clearable>
            <template v-for="dict in dict.type.customer_source">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
    </SearchContent>
    <el-card style="margin-top: 10px;margin-bottom: 15px;">
      <div style="display: flex;justify-content: start;align-items: center;">
        <div style="margin-left: 10px; border: 1px solid #ccc;font-size: 15px; color: #1890ff; width: 160px;height: 35px;line-height: 35px;text-align: center;border-radius: 10px;">
          <span style="color: #606266;">预计明日回款:</span>
          <span>{{ dataObj.paymentIsExpectedTomorrow }}</span>
        </div>
        <div style="margin-left: 10px; border: 1px solid #ccc;font-size: 15px; color: #1890ff; width: 160px;height: 35px;line-height: 35px;text-align: center;border-radius: 10px;">
          <span style="color: #606266;">预计今日回款:</span>
          <span>{{ dataObj.paymentIsExpectedToday }}</span>
        </div>
        <div style="margin-left: 10px;border: 1px solid #ccc;font-size: 15px; color: #1890ff; width: 160px;height: 35px;line-height: 35px;text-align: center;border-radius: 10px;">
          <span style="color: #606266;">超时未处理:</span>
          <span>{{ dataObj.timeoutOutstanding }}</span>
        </div>
      </div>

    </el-card>
    <div class="card-wrap card-padding">
      <table-page :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
        <!-- 操作插槽 -->
        <template slot="tableColAc">
          <el-table-column label="操作" fixed width="200" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="text" v-hasPermi="['collectionModule:collectionManage:view']" @click="btn(3,scope.row)">查看</el-button>
              <el-button type="text" v-if="scope.row.canSubmit" v-hasPermi="['collectionModule:collectionManage:strategy']" @click="btn(4,scope.row)">提交催收结果</el-button>
            </template>
          </el-table-column>
        </template>
        <!-- 普通列插槽 -->
        <template slot="tableCol">
          <el-table-column label="催收编号" fixed align="center" prop="code" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="blue">{{scope.row.code}}</span>
            </template>
          </el-table-column>
          <el-table-column label="客户名称" align="center" prop="customerName" min-width="200px" show-overflow-tooltip />
          <el-table-column label="客户等级" align="center" prop="customerLevel">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.customer_level" :value="scope.row.customerLevel" />
            </template>
          </el-table-column>
          <el-table-column label="客户来源" align="center" prop="customerSource">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.customer_source" :value="scope.row.customerSource" />
            </template>
          </el-table-column>
          <el-table-column label="累计应收金额" align="center" prop="totalReceivableAmount" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.totalReceivableAmount)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="累计已收金额" align="center" prop="totalReceivedAmount" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.totalReceivedAmount)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="累计待收金额" align="center" prop="totalToBeReceived" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.totalToBeReceived)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="累计销账金额" align="center" prop="totalWriteOffAmount" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.totalWriteOffAmount)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="本月回款金额" align="center" prop="amountOfThisMonth" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.amountOfThisMonth)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="今日回款金额" align="center" prop="amountOfToDay" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.amountOfToDay)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="催收进度" align="center" prop="collectionProgress" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="display: flex;justify-content: start;align-items: center;">
                <dict-tag :options="dict.type.collection_progress" :value="scope.row.collectionProgress" style="margin-left: 40px;" />
                <span v-if="scope.row.isSuspend==1" style="color: #1890ff;"> ({{ scope.row.isSuspend==0?'':'已暂缓' }})</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="处理人" align="center" prop="processingByName" min-width="180px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.processingByName }}{{ scope.row.reassignment }}</span>
              <span v-if="scope.row.reassignment ==1" style="color: #1890ff;"> ({{ scope.row.reassignment==0?'':'已改派' }})</span>
            </template>
          </el-table-column>
          <el-table-column label="最新处理时间" align="center" prop="processingTime" min-width="150px" show-overflow-tooltip />
          <el-table-column label="最新预计回款时间" align="center" prop="paybackTime" min-width="150px" show-overflow-tooltip />
          <el-table-column label="最新预计回款金额" align="center" prop="paybackAmount" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.paybackAmount)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="未处理天数" align="center" prop="daysOutstanding" min-width="150px" show-overflow-tooltip />
          <el-table-column label="创建时间" align="center" prop="createTime" min-width="150px" show-overflow-tooltip />
        </template>
      </table-page>
    </div>

    <!-- 添加或修改测试单表对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body class="form-dialog" width="35px%">
      <div style="width: 90%; margin: 0 auto;">
        <el-form ref="formDig" label-position="right" :model="formDig" label-width="160px" :rules="rules">
          <el-form-item label="催收策略:">
            <div style="display: flex;justify-content: start;align-items: center;">
              <span> <dict-tag :options="dict.type.collection_progress" :value="formDig.collectionProgress" /></span>
              <span>{{ text }}</span>
            </div>
          </el-form-item>
          <el-form-item v-if="type ==4" label="催收结果:" prop="collectionResult">
            <el-radio-group v-model="formDig.collectionResult">
              <el-radio :label="1">有结果</el-radio>
              <el-radio :label="2">无结果</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="预计回款时间:" prop="paybackTime" v-if="formDig.collectionResult==1">
            <el-date-picker v-model="formDig.paybackTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 40%;">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="预计回款金额:" prop="paybackAmount" v-if="formDig.collectionResult==1">
            <el-input placeholder="请输入预计回款金额" v-model="formDig.paybackAmount" @input="formDig.paybackAmount=formDig.paybackAmount.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="说明:" prop="remark">
            <el-input type="textarea" placeholder="请输入说明内容" v-model="formDig.remark" maxlength="500" :rows="5" show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="附件:" prop="attachments">
            <ImageCommon :up-type="2" info="选择附件" :limit="5" v-model="formDig.attachments" isShowTip :fileSize="30" :fileType="['png/jpg/jpeg/pdf/doc/docx/excel']"></ImageCommon>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="cancelDig">取消</el-button>
        <el-button type="primary" @click="submitForm">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import { getCollectionHandleList, saveCollectionHandle, collectionHandleDetail } from "@/api/collectionModule";

export default {
  name: 'CollectionHandle',
  components: {
    SearchContent,
  },
  dicts: ["collection_progress", 'customer_level', 'customer_source'],
  data() {
    return {
      title: '',
      loadingTable: false,
      totalTable: 0,
      rules: {
        collectionResult: [
          { required: true, message: "请选择催收结果", trigger: "change" },
        ],
        remark: [
          { required: true, message: "请输入说明", trigger: "blur" },
        ],
        paybackTime: [
          { required: true, message: "请选择预计回款时间", trigger: "blur" },
        ],
        paybackAmount: [
          { required: true, message: "请输入预计回款金额", trigger: "blur" },
        ],
      },
      foreWarningTime: [],
      // 遮罩层
      loading: true,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParamsDig: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dataList: [],
      // 表单参数
      formDig: {},
      type: null,
      text: '',
      dataObj: {}
    };
  },
  created() {
    this.getList();
    this.collectionHandleDetail()
  },
  methods: {
    collectionHandleDetail() {
      collectionHandleDetail(this.queryParams).then(res => {
        if (res.code == '200') {
          this.dataObj = res.data
        }
      })
    },
    // 多选按钮
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    cancelDig() { this.open = false },
    // 导出
    /** 预警配置 */
    btn(type, row) {
      this.type = type
      this.open = true
      this.$set(this, 'formDig', {})
      this.$refs["formDig"]?.clearValidate()
      if (type == 4) {
        this.title = '提交催收结果'
        this.text = row.isSuspend == 0 ? '' : '(已暂缓)'
        let collectionProgress = `${row.collectionProgress}`
        this.$set(this.formDig, 'handleId', row.id)
        this.$set(this.formDig, 'collectionProgress', collectionProgress)
      } else if (type == 3) {
        this.open = false
        this._toPage({
          path: "/collectionModule/collectionHandle/initiateACollectionDetailResult",
          name: "InitiateACollectionDetailResult",
          query: {
            type: 'detailView',
            beFrom: 'CollectionHandle',
            id: row.id
          }
        });
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["formDig"].validate((valid) => {
        if (valid) {
          this.open = false
          if (this.type == 4) {
            // 接口
            saveCollectionHandle(this.formDig).then((res) => {
              if (res.code == "200") {
                this.$message.success("提交成功");
                this.getList();
                this.collectionHandleDetail()
              }
            });
          }
        }
      });
    },
    /** 查询测试单表列表 */
    getList() {
      this.loading = true;
      getCollectionHandleList(this.queryParams).then((res) => {
        if (res.code == "200") {
          const { rows, total } = res;
          this.dataList = rows;
          this.total = total;
          this.loading = false;
        }
      });
    },
    // 清空校验
    clearCheck() {
      this.$refs["form"] && this.$refs["form"].resetFields();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.clearCheck()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.startTime = this.foreWarningTime[0]
      this.queryParams.endTime = this.foreWarningTime[1]
      this.getList();
      this.collectionHandleDetail()
    },
    handleQueryDig() {
      this.queryParamsDig.pageNum = 1;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      },
        this.foreWarningTime = []
      this.handleQuery();
    },
    resetQueryDig() {
      this.queryParamsDig = {
        pageNum: 1,
        pageSize: 10,
      }
      console.log('1');
    },
  },
};
</script>
<style lang="scss" scoped>
.pagination-container {
  padding: 0 20px 50px !important;
}
.blue {
  color: #1890ff !important;
  cursor: pointer;
}
</style>
